<template>
	<view class="list">
		<block v-for="item in list" :key="item.id">
			<view class="item">
				<view class="item-box">
					<view class="item-box-image">
						<u-image
							class="image" 
							width="120rpx" 
							height="120rpx" 
							border-radius="120rpx"
							:src="item.url">
						</u-image>
						<u-image
							class="images" 
							width="90rpx" 
							height="40rpx" 
							border-radius="40rpx"
							:src="item.image_url">
						</u-image>
					</view>
					<view class="info">
						<view class="title u-flex u-row-between">
							<view class="u-flex">
								<view class="tag">高级</view>
								<view class="text u-font-lg">{{item.title}}</view>
							</view>
							<view class="u-flex">
								<u-image
								class="image" 
								width="30rpx" 
								height="30rpx" 
								src="/static/icons/location_icon.png"></u-image>
								<view class="num u-font-sm u-m-l-10">{{item.location}}</view>
							</view>
						</view>
						<view class="info-row u-flex">
							<view class="li">粉丝飙升</view>
							<view class="li">家居日用</view>
						</view>
					</view>
				</view>
				<view class="item-box-info u-flex u-row-center u-text-center">
					<view class="info-item">
						<view class="num u-font-lg">{{item.fans_num}}<text class="u-font-xs">w</text></view>
						<view class="text u-font-sm">粉丝数</view>
					</view>
					<view class="info-item">
						<view class="num u-font-lg">{{item.price}}<text class="u-font-xs">w</text></view>
						<view class="text u-font-sm">赞藏数</view>
					</view>
				</view>
				<view class="btn-list u-m-t-40">
					<view class="home"><u-button hover-class="none" type="info" shape="circle" size="medium">复制主页链接</u-button></view>
					<view>
						<u-button hover-class="none" type="error" size="medium" shape="circle" class="u-margin-right-20">取消收藏</u-button>
						<u-button hover-class="none" type="default" size="medium" class="send" shape="circle">联系方式</u-button>
					</view>
				</view>
				
			</view>
		</block>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array,
			default() {
				return []
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.list {
	padding: 20rpx;
	.item{
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		.item-box{
			display: flex;
			.item-box-image{
				position: relative;
				.images{
					position: absolute;
					bottom: -10rpx;
					left: 15rpx;
				}
			}
			.info{ 
				padding-left: 20rpx;
				width: 100%;
				.title{  
					display: flex; align-items: center;  margin-bottom: 20rpx;
					.tag{ background-color: #e8c787; color:#000; font-size: 26rpx; padding:5rpx 15rpx; border-radius: 20rpx; }
					.u-font-lg{ padding-left: 20rpx; }
				}
				.info-row{ 
					.li{ padding: 0 30rpx; border-radius: 60rpx; margin-right: 20rpx; height:60rpx; line-height: 60rpx; background-color: #fafafa; color:#d0d0d0; }
				}
			 } 
		}
		.item-box-info{
			display: flex;
			margin-top: 20rpx;
			.info-item{ 
				flex:1;
				.num{ font-weight: 600; font-size: 40rpx; margin-bottom: 20rpx; }
				.u-font-sm{ padding-left: 8rpx; }
			}	
		}
		.btn-list{
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			/deep/ .u-size-medium{ padding:0 30rpx; }
			.send{ background-color: #000000; color:#fff; }
		}
	}
	
}
</style>
